<template>
    <div>
        <h2>教师个人信息</h2>
        <p>姓名：{{ name }}</p>
        <el-form :model="form" @submit.prevent="onSubmit">
            <el-form-item label="姓名">
                <el-input v-model="name" disabled></el-input>
            </el-form-item>
            <el-form-item label="教学科目">
                <el-select v-model="form.subject" multiple placeholder="请选择任教科目">
                    <el-option label="网站前端开发" value="网站前端开发"></el-option>
                    <el-option label="专业英语" value="专业英语"></el-option>
                    <el-option label="Python 程序设计" value="Python 程序设计"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import TeacherDetail from '../components/TeacherDetail.vue';
import { useMemberStore } from '../stores/member'
import { userUserStore } from '../stores/user'
import { ref, onMounted } from 'vue'

const userStore = userUserStore()
const memberStore = useMemberStore()

const teacher = ref({
    id: null,
    subjects: []

})

onMounted(() => {
    const t = memberStore.getUserByUsername(userStore.username)
    if (t) {
        teacher.value.id = t.id
        teacher.value.name = t.name
        teacher.value.subjects = t.subjects
    }
})
const handleSubmit = () => {
  memberStore.updateTeacherSubjects(teacher.value.id, teacher.value.subjects)
  ElMessage.success("教学科目已保存")
}

</script>